<div id="gray" style="display: none;"></div>
<div class="popup" id="popup_dialog" style="cursor: default; display: none; top: 269.3px; left: 757.8px;">
    <div class="login_tc">
        <a href="#" class="quxiao guanbi"><i class="iconfont">&#xe614;</i></a>
        <!--最新动态选项卡 start-->
        <DIV class="focus-setTab">
            <DIV class="focus-menu">
                <UL>
                    <LI class="hover" id="ECS_treee1">登录</LI>
                    <LI id="ECS_treee2">注册</LI>
                </UL>
                <DIV class="kpple-cB"></DIV>
            </DIV>
            <DIV class="focus-content">
                <DIV id="ECS_treee1_BODY">
                    <div class="f_login login">
                        <ul>
                            <li><i class="iconfont">&#xe64f;</i><input type="text" placeholder="手机" class="l_phone"
                                                                       id="l_phone" type="text" maxlength="11"></li>
                        </ul>
                        <div class="mail_btn"><input type="submit" value="登录" onclick="login();"
                                                     style="cursor: pointer;"></div>
                    </div>
                </DIV>
                <DIV class="kpple-dN" id="ECS_treee2_BODY" style="display:none;">
                    <div class="f_login reg">
                        <ul>
                            <!--<li><i class="iconfont">&#xe645;</i><input type="text" placeholder="城市" class="city"></li>-->
                            <li><i class="iconfont">&#xe64e;</i><input type="text" placeholder="姓名" class="surname"
                                                                       id="surname" type="text"></li>
                            <li><i class="iconfont">&#xe64f;</i><input type="text" placeholder="手机" class="phone"
                                                                       id="phone" type="text" maxlength="11"></li>
                        </ul>
                        <div class="mail_btn"><input type="submit" value="完成注册" onclick="confirmSubmit();"
                                                     style="cursor: pointer;"></div>
                        <p style=" line-height: 48px; text-align: center;">
                            <label><input type="checkbox" class="xy" id="xy" checked="checked"
                                          style="width:13px;height:13px; margin-right:3px; margin-top:18px; vertical-align: top;">我已阅读并同意
                                <a href="http://www.qidashi.com/pc_xy.html"
                                   style=" text-decoration: underline; color: #333;">《用户协议》</a>
                            </label>
                        </p>
                    </div>
                </DIV>
            </DIV>
        </DIV>
        <script type="text/javascript">
            //<![CDATA[
            var cycleList = ['ECS_treee1', 'ECS_treee2'];
            var tabFront = 'hover';
            var tabBack = '';

            function cycleShow(obj) {
                var curObj;
                var curBody;
                for (i = 0; i < cycleList.length; i++) {
                    curObj = document.getElementById(cycleList[i]);
                    curBody = document.getElementById(cycleList[i] + '_BODY');
                    if (obj.id == curObj.id) {
                        curObj.className = tabFront;
                        curBody.style.display = "";
                    }
                    else {
                        curObj.className = tabBack;
                        curBody.style.display = "none";
                    }
                }
            }

            // 添加事件
            for (i = 0; i < cycleList.length; i++) {
                document.getElementById(cycleList[i]).onclick = function () {
                    cycleShow(this);
                };
            }
            //]]>
        </script>
        <!--最新动态选项卡 end-->

    </div>
</div>
<script>
    function confirmSubmit() {
        var surname = $("#surname").val();
        var phone = $("#phone").val();
        var reg = /^1[3-9][0-9]{9}$/;

        if (!reg.test(phone)) {
            alert("手机号格式不正确!");
            return;
        }
        var xy = $("input[class='xy']").is(':checked');
        if (!xy) {
            alert('你需要勾选同意用户协议')
            return;
        }
        $.ajax({
            url: '{:U("Index/register")}',
            data: {name: surname, mobile: phone},
            dataType: "json",
            type: "post",
            success: function (data) {
                if (data.status == 1) {
                    window.location.reload();
                }
            }
        });
    }
    function login() {
        var phone = $("#l_phone").val();
        var reg = /^1[3-9][0-9]{9}$/;
        if (phone == null || phone == '' || phone == undefined || !reg.test(phone)) {
            alert("请输入符合规范的手机号!");
            return;
        }
        $.ajax({
            url: "{:U('Index/login')}",
            data: {mobile: phone},
            dataType: "json",
            type: "post",
            success: function (data) {
                if (data.status == 1) {
                    window.location.reload();
                } else {
                    alert(data.msg);
                }
            }
        });
    }

    $("#toLogin1").click(function () {
        var type = $(this).data("type");
        $("#click_type").val(type);
        $("#surname").val("");
        $("#phone").val("");
        $("#gray").show();
        //$("#popup").hide();//查找ID为popup的DIV show()显示#gray
        $('#ECS_treee2').removeClass('hover');
        $('#ECS_treee1').addClass('hover');
        $('#ECS_treee2_BODY').css({'display': 'none'});
        $('#ECS_treee1_BODY').removeAttr('style')
        $("#popup_dialog").show();//查找ID为popup的DIV show()显示#gray
    });

    $("#toReg1").click(function () {
        var type = $(this).data("type");
        $("#click_type").val(type);
        $("#l_phone").val("");
        $("#gray").show();
        //$("#popup1").hide();//查找ID为popup的DIV show()显示#gray
        $('#ECS_treee1').removeClass('hover');
        $('#ECS_treee2').addClass('hover');
        $('#ECS_treee1_BODY').css({'display': 'none'});
        $('#ECS_treee2_BODY').removeAttr('style')

        $("#popup_dialog").show();//查找ID为popup的DIV show()显示#gray
    });

    //窗口效果
    //点击登录class为tc 显示
    $(".tc").click(function () {
        $("#gray").show();
        $("#popup_dialog").show();//查找ID为popup的DIV show()显示#gray
        tc_center();
    });
    //点击关闭按钮
    $("a.guanbi").click(function () {
        $("#gray").hide();
        $("#popup_dialog").hide();//查找ID为popup的DIV hide()隐藏
    });

    //窗口水平居中
    $(window).resize(function () {
        tc_center();
    });

    function tc_center() {
        var _top = ($(window).height() - $(".popup").height()) / 2;
        var _left = ($(window).width() - $(".popup").width()) / 2;

        $(".popup").css({top: _top, left: _left});
    }
    tc_center();
</script>